// Directory styling

#file-tree {
    background-color: var(--bg-directories);
    transition: @mode-transition all ease;
    color: var(--grey-4);
    font-size:@font-size-small;

    // Direct descendants need some margin to the files and to other roots
    #directories-dirs-header, #directories-files-header {
      border-bottom:1px solid var(--grey-2);
      color: var(--grey-2);
      font-size: @font-size-small * 0.8; // Even smaller
    }


    div.list-item {
        &.selected {
            background-color:var(--c-primary);
            color:white;

            &:before { color:white; }
        }

        &:hover {
          color: var(--grey-4);
          background-color:var(--grey-1);
        }

        &.highlight {
            box-shadow: 0px 0px 1px 2px var(--selection-light);

            // Prevent hovering effect on drag'n'drop actions
            &:hover  { background-color:inherit; }
        }
        &.selected {
          background-color:var(--c-primary);
          color:white;
        }

        &:hover {
          background-color:var(--grey-1);
          color:inherit;
        }

        span.dir { color: var(--grey-2); }

        &.dead-directory {
          color: var(--grey-2);
          &:hover {
            color: var(--grey-2);
            background-color: inherit;
          }
        }

        &.project {
          color: var(--c-project);
          &.selected { color: white; }
        }

        &.display-search-results {
          color: var(--red-1);
        }

        &.directory .sorter {
          color: var(--grey-4);
          background-color: var(--grey-1);

          .sortDirection:hover, .sortType.hover {
            color: var(--grey-8);
          }
        }
    }

    .empty-tree {
        background-color:var(--grey-0);
        color:var(--grey-4);
    }
}

// When both directories and preview list are visible, we need a visible border
// between both so that it does not look weird.
#file-manager.expanded #file-tree {
  border-right: 1px solid var(--grey-2);
}
